import React from 'react';
import {useNavigate} from 'react-router-dom';
import {Typography, Button, message, Form, Input, notification} from 'antd';
import {UserOutlined, LockOutlined} from "@ant-design/icons";
import { useAppDispatch } from "@/store/hook"
import './Login.css'
import {setUserInfo} from "@/store/module/user";


const {Title} = Typography;

const Login: React.FC = () => {

    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();
    //store
    const dispatch = useAppDispatch();

    //点击登录
    const onFinish = (values: any) => {
        console.log('Success:', values);
        messageApi.open({
            key: 'updatable',
            type: 'loading',
            content: '登录中...',
        });

        window.req.userLogin({
            username: values.username,
            password: values.password
        }).then((res: any) => {
            console.log(res)
            if (res.flag) {
                //用户信息存储redux全局中
                dispatch(setUserInfo(res.data))

                messageApi.open({
                    key: 'updatable',
                    type: 'success',
                    content: '登录成功',
                    duration: 2,
                }).then(() => {
                    navigate('/main/home')//也可直接加路径
                });
            } else {
                messageApi.open({
                    key: 'updatable',
                    type: 'error',
                    content: '登录失败',
                    duration: 1,
                }).then(() => {
                    notification.open({
                        message: '登录失败',
                        description:'账号或密码错误!'
                    });
                })
            }

        })


    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <>
            {contextHolder}
            <div className={"login_box"}>
                <div className={"login_main"}>
                    <div className={"login_fontsize"}>
                        <Title level={5}>管理员登录</Title>
                    </div>
                    <Form
                        name="login_form"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        initialValues={{remember: true}}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            name="username"
                            rules={[{required: true, message: 'Please input your Username!'}]}
                        >
                            <Input className={"login_input"} prefix={<UserOutlined className="site-form-item-icon"/>}
                                   placeholder="Username"/>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{required: true, message: 'Please input your Password!'}]}
                        >
                            <Input
                                className={"login_input"}
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>

                        </Form.Item>
                    </Form>

                </div>
            </div>
        </>

    )
}


export default Login;
